class Draw {
	constructor(canvas, ctx) {
		this.canvas = canvas
		this.ctx = ctx
		this.src = ''
		this.cusDrawList = []
	}
	initData(drawList){
		const imgList = drawList.filter(item=>item.type === 'img')
		const rectList = drawList.filter(item=>item.type === 'rect')
		const textList = drawList.filter(item=>item.type === 'text')
		this.cusDrawList = [...rectList,...imgList,...textList]
	}
	createPoster({
		canvasData,
		drawList
	}) {
		this.initData(drawList)
		const {
			cusDrawList
		} = this
		
		return new Promise(async (resolve,reject)=>{
			uni.showLoading({
				title:'正在生成...'
			})
			try{
				for (let i in cusDrawList) {
					const item = cusDrawList[i]
					switch (item.type) {
						case 'rect':
							this.drawRect({ ...item})
							break;
						case 'img':
							await this.drawImg({
								...item
							})
							break;
						case 'text':
							this.fillText({ ...item}, canvasData)
							break;
					}
				}
				setTimeout(async ()=>{
					const res = await this.saveImg()
					resolve(res)
				},700)
			}catch(e){
				reject(e)
			}
			
		})
	}
	/*
	 *	绘制文字
	 */
	fillText(params, canvasData) {
		console.log(params)
		let {
			fontSize = 16, color = '#FFFFFF', content, left = 0, top = 0, textAlign = 'center', lineHeight = 16, maxLineNum = 2,
				maxWidth = 300, weight = 'normal', fontFamily = 'pf_medium'
		} = params
		const {
			ctx,
			canvas
		} = this
		
		let arrText = content.split('')
		let line = '',
			_top = top,
			lineNum = 1,
			testLine = ''
		ctx.fillStyle = color
		ctx.setTextAlign = textAlign
		ctx.font = ' normal ' + weight + ' ' + fontSize + 'px ' +  fontFamily
		// 设置一行文字剧中 数据需要设置 left: 'center'  maxLineNum: 1 
		if (left === 'center' && maxLineNum === 1) {
			var textWidth = ctx.measureText(content).width;
			// var canvasWidth = canvas.width;
			var canvasWidth = canvasData.width
			left = (canvasWidth - textWidth) / 2;
		}
		for (let i = 0; i < arrText.length; i++) {
			testLine += [arrText[i]]
			let testWidth = ctx.measureText(testLine).width || 0
			if (testWidth > maxWidth) {
				if (lineNum === maxLineNum) {
					if (i !== arrText.length) {
						testLine = testLine.substring(0, testLine.length - 1) + '...'
						ctx.fillText(testLine, left, _top, maxWidth)
						testLine = ''
						break
					}
				}
				ctx.fillText(testLine, left, _top, maxWidth)
				testLine = ''
				_top += lineHeight
				lineNum++
			}
		}
		ctx.fillText(testLine, left, _top, maxWidth)
	}
	/*
	 *	绘制矩形
	 * */
	drawRect(params) {
		const {
			left = 0, top = 0, width = 0, height = 0, radius = 0, color = '#ffffff'
		} = params
		const {
			ctx
		} = this
		ctx.fillStyle = color
		if (!radius) {
			ctx.save()
			ctx.fillRect(left, top, width, height)
			ctx.restore()
		} else {
			this.roundRect(left, top, width, height, radius)
		}
	}
	/*
	 *	绘制图片
	 * */
	async drawImg(params) {
		const {
			url = '', top = 0, left = 0, width = 50, height = 50, shape = 'square'
		} = params
		const {
			ctx
		} = this
		const res = await this.loadImg(params)
		console.log(res);
		if (params.shape == 'circle') {
			this.circleImg(res)
		} else {
			ctx.drawImage(res.img, res.left, res.top, res.width, res.height)
		}
	}
	/*
	 *	预加载图片
	 */
	loadImg(params) {

		const {
			canvas
		} = this
		return new Promise((resolve, reject) => {
			const img = canvas.createImage()
			img.src = params.url
			img.onload = (e) => {
				resolve({
					code: 200,
					img,
					...params
				})
			}
			img.onerror = () => {
				reject(` img error`)
			}
		})
	}
	// 裁剪圆形头像
	circleImg(params) {

		const {
			url,
			left,
			top,
			width,
			img
		} = params
		const {
			ctx
		} = this
		let r = parseInt(width / 2) // 半径
		ctx.save()
		let d = 2 * r
		let cx = left + r
		let cy = top + r
		ctx.arc(cx, cy, r, 0, 2 * Math.PI)
		ctx.clip()
		ctx.drawImage(img, left, top, d, d)
		ctx.restore()
	}
	/*
	 *	裁剪圆角
	 * */
	roundRect(x, y, w, h, r) {
		const {
			ctx
		} = this
		// 开始绘制
		ctx.beginPath()
		// 这里是使用 fill 还是 stroke都可以，二选一即可
		ctx.setFillStyle = 'transparent'
		// ctx.setStrokeStyle = 'transparent'
		ctx.save()
		// 左上角
		ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

		// border-top
		ctx.moveTo(x + r, y)
		ctx.lineTo(x + w - r, y)
		ctx.lineTo(x + w, y + r)
		// 右上角
		ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

		// border-right
		ctx.lineTo(x + w, y + h - r)
		ctx.lineTo(x + w - r, y + h)
		// 右下角
		ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

		// border-bottom
		ctx.lineTo(x + r, y + h)
		ctx.lineTo(x, y + h - r)
		// 左下角
		ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

		// border-left
		ctx.lineTo(x, y + r)
		ctx.lineTo(x + r, y)
		ctx.fill()
		// ctx.stroke()
		ctx.closePath()
		// 剪切
		ctx.clip()
		ctx.restore()
	}
	// 保存图片
	saveImg() {
		return new Promise((resolve,reject)=>{
			const {
				canvas,
				ctx
			} = this
			uni.hideLoading()
			try{
			const img = canvas.toDataURL('image/png')
				resolve(img)
			}catch(e){
				reject(e)
			}
		})
	}
}

export default Draw
